<!-- 分享弹窗面板-component -->
<template>
  <div
    @click.stop="closeShareBoard"
    ref="shareBoardContainer"
    class="popup z-[99] fixed top-0 left-0 right-0 bottom-0 grid h-full overflow-y-auto p-10 lg:absolute bg-white dark:bg-dark-background md:absolute md:bg-dark-background md:bg-opacity-[0.35] dark:md:bg-opacity-[0.45]"
  >
    <!-- 添加分享 -->
    <div
      v-if="!fileStore.curFileInfo.isShare || isShareSuccess"
      :class="!isShareSuccess ? 'animate-slide-up' : 'animate-boom-in'"
      class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-dark-foreground md:relative md:w-[490px] md:rounded-xl"
    >
      <div class="flex items-center justify-between px-6 pt-6 pb-6">
        <div class="flex items-center">
          <div class="mr-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18px"
              height="18px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather feather feather-share text-theme-color"
            >
              <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
              <polyline points="16 6 12 2 8 6"></polyline>
              <line x1="12" y1="2" x2="12" y2="15"></line>
            </svg>
          </div>
          <b class="text-base font-bold">
            {{ i18nStore.translate('share_your') }}
            {{
              i18nStore.translate(
                fileStore.checkIsFolder(fileStore.curFileInfo)
                  ? 'folder'
                  : 'file'
              )
            }}
          </b>
        </div>
        <div
          class="-m-3 cursor-pointer p-3 transition-all duration-200 hover:scale-125"
          @click="flagStore.setShareBoardOpen(false)"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14px"
            height="14px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="hover-text-theme vue-feather feather feather-x"
          >
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </div>
      </div>

      <div
        class="absolute top-16 bottom-24 left-0 right-0 h-auto overflow-auto px-6 md:relative md:top-0 md:bottom-0 !overflow-initial"
      >
        <!-- 文件信息 -->
        <div
          spellcheck="false"
          class="flex select-none items-center rounded-xl mb-5"
        >
          <div class="relative w-16 shrink-0">
            <div
              v-if="fileStore.curFileInfo.type === 'folder'"
              class="svg-color-theme"
            >
              <SvgIcon
                name="folder"
                :style="{ width: '53px', height: '52px' }"
                iconClass="svg-color-theme"
              />
            </div>
            <div
              v-else-if="fileStore.curFileInfo.type === 'image'"
              class="relative w-16 shrink-0"
            >
              <img
                :src="fileStore.curFileInfo.url"
                alt=""
                loading="lazy"
                class="ml-0.5 h-12 w-12 rounded object-cover"
              />
            </div>
            <div
              v-else-if="fileStore.curFileInfo.fileType.type === 'video'"
              class="relative w-16 shrink-0"
            >
              <video
                :src="fileStore.curFileInfo.url"
                class="ml-0.5 h-12 w-12 object-cover rounded"
                loop
                muted
                @loadeddata="
                  (e) => {
                    e.target.volume = 0;
                    e.target.play();
                  }
                "
              />
            </div>
            <div v-else class="flex items-center justify-center pr-2">
              <span
                class="absolute z-[5] mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-[9px] font-semibold text-theme-color"
              >
                {{ fileStore.curFileInfo.type }}
              </span>
              <SvgIcon
                name="file"
                svgClass="vue-feather dark:text-gray-800 text-gray-100 "
                :style="{ width: '38px', height: '51px' }"
                iconClass="svg-color-theme"
              />
            </div>
          </div>
          <div class="pl-2">
            <span
              :title="fileStore.curFileInfo.name"
              contenteditable="false"
              class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold hover:underline"
              style="max-width: 240px"
            >
              {{ fileStore.curFileInfo.name }}
            </span>
            <div class="flex items-center">
              <small class="block text-xs text-gray-500 dark:text-gray-500">
                <i
                  v-if="fileStore.curFileInfo[FILE_LIST.FILE_SHARE]"
                  class="pi pi-link vue-feather text-theme-color text-xs"
                />
                <span> {{ size }} </span>
                {{ i18nStore.translate('date', fileStore.curFileInfo.times) }}
              </small>
            </div>
          </div>
        </div>
        <!-- 表单信息 -->
        <form @submit="submitAdd" v-if="!isShareSuccess">
          <!-- 密码开关及密码框 -->
          <div>
            <div
              class="flex w-full items-center justify-between space-x-2 sm:space-x-8 mb-6 sm:mb-7"
            >
              <div class="flex justify-between items-center w-full">
                <div class="leading-5">
                  <label
                    class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
                  >
                    {{ i18nStore.translate('password_protection') }}
                  </label>

                  <span
                    class="block text-xs leading-4 dark:text-gray-500 text-gray-500"
                    >{{
                      i18nStore.translate(
                        'secure_your_project_with_a_custom_password_protection'
                      )
                    }}</span
                  >
                </div>
                <InputSwitch v-model="passwordChecked" />
              </div>
            </div>
            <!-- 密码 -->
            <div v-if="passwordChecked">
              <div class="-mt-2 mb-6 sm:mb-7">
                <input
                  type="text"
                  maxlength="20"
                  :placeholder="i18nStore.translate('enter_your_password')"
                  class="focus-border-theme input-dark focus:outline-theme-color"
                  v-model="password"
                />
              </div>
            </div>
          </div>
          <!-- 邮箱分享开关及邮箱框 -->
          <div>
            <div
              class="flex w-full items-center justify-between space-x-2 sm:space-x-8 mb-6 sm:mb-7"
            >
              <div class="flex justify-between items-center w-full">
                <div class="leading-5">
                  <label
                    class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
                  >
                    {{ i18nStore.translate('send_link_by_email') }}
                  </label>
                  <span
                    class="block text-xs leading-4 dark:text-gray-500 text-gray-500"
                    >{{ i18nStore.translate('email_link_sent') }}</span
                  >
                </div>
                <InputSwitch v-model="emailChecked" />
              </div>
            </div>
            <!-- 邮箱 -->
            <div v-if="emailChecked">
              <div class="-mt-2 mb-6 sm:mb-7">
                <input
                  type="text"
                  maxlength="20"
                  :placeholder="
                    i18nStore.translate('please_enter_email_address')
                  "
                  class="focus-border-theme input-dark focus:outline-theme-color"
                  v-model="email"
                />
              </div>
            </div>
          </div>
          <!-- 过期时间 -->
          <div>
            <div
              class="flex w-full items-center justify-between space-x-2 sm:space-x-8 mb-6 sm:mb-7"
            >
              <div class="flex justify-between items-center w-full">
                <div class="leading-5">
                  <label
                    class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
                  >
                    {{ i18nStore.translate('expiration') }}
                  </label>
                  <span
                    class="block text-xs leading-4 dark:text-gray-500 text-gray-500"
                    >{{
                      i18nStore.translate(
                        'your_link_will_expire_after_a_specific_time_period'
                      )
                    }}</span
                  >
                </div>
                <InputSwitch v-model="expireChecked" />
              </div>
            </div>
            <div class="-mt-2 mb-2 sm:mb-3" v-if="expireChecked">
              <div class="select-box box">
                <div
                  @click="activeOption(index)"
                  v-for="(option, index) in expirationOptions"
                  class="box-item active-bg-theme-100 active-border-theme transition-all duration-200 hover:scale-110 dark:bg-[#171819] dark:text-[#00e1ff]"
                  :class="{ active: index === activeOptionIndex }"
                  :key="index"
                >
                  <span
                    class="box-value active-text-theme"
                    :class="{ active: index === activeOptionIndex }"
                    >{{ option.label }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </form>
        <!-- 分享成功 -->
        <div v-if="isShareSuccess" class="">
          <label
            class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
          >
            {{ i18nStore.translate('get_your_link') }}
          </label>
          <div class="relative flex items-center">
            <input
              id="link-input-9573277"
              :value="qrcodeUrl"
              type="text"
              readonly="readonly"
              class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background py-2 pr-16 pl-3 text-sm font-bold dark:bg-2x-dark-foreground focus:outline-theme-color"
            />
            <div class="flex items-center">
              <div class="absolute right-2.5 p-1">
                <i
                  v-if="isCopySuccess"
                  class="pi pi-check hover:text-theme-color vue-feather cursor-pointer feather feather-copy text-sm"
                ></i>
                <svg
                  v-else
                  @click="copyShareLink"
                  xmlns="http://www.w3.org/2000/svg"
                  width="14px"
                  height="14px"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="hover:text-theme-color vue-feather cursor-pointer feather feather-copy"
                >
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path
                    d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                  ></path>
                </svg>
                <!---->
              </div>
              <!-- <div class="absolute right-2.5 p-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14px"
                  height="14px"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="hover:text-theme-color vue-feather cursor-pointer feather feather-more-horizontal"
                >
                  <circle cx="12" cy="12" r="1"></circle>
                  <circle cx="19" cy="12" r="1"></circle>
                  <circle cx="5" cy="12" r="1"></circle>
                </svg>
              </div> -->
            </div>
            <!---->
            <textarea
              class="pointer-events-none absolute right-full opacity-0"
            ></textarea>
            <textarea
              class="pointer-events-none absolute right-full opacity-0"
            ></textarea>
          </div>
          <!---->
          <!---->
        </div>
      </div>
      <!-- 提交按钮 -->
      <div
        v-if="!isShareSuccess"
        class="absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6 md:relative"
      >
        <button
          @click="flagStore.setShareBoardOpen(false)"
          type="button"
          class="button-base w-full secondary hover:opacity-70 hover:scale-110"
        >
          <div class="content dark:text-[#00e1ff]">
            {{ i18nStore.translate('cancel') }}
          </div>
        </button>
        <button
          type="button"
          class="button-base w-full theme hover:opacity-70 hover:scale-110"
          @click="submitAdd"
        >
          <i v-if="isCreateShareLoading" class="pi pi-spin pi-spinner"></i>
          <div v-else class="content dark:">
            {{ i18nStore.translate('create_link') }}
          </div>
        </button>
      </div>
      <!-- 分享成功按钮 -->
      <div
        v-if="isShareSuccess"
        class="absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6 md:relative"
      >
        <button
          type="button"
          class="button-base w-full theme hover:opacity-70 hover:scale-110"
          @click="flagStore.setShareBoardOpen(false)"
        >
          <div class="content">
            {{ i18nStore.translate('great_i_finished') }}
          </div>
        </button>
      </div>
    </div>
    <!-- 编辑分享 -->
    <div
      v-else
      class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-dark-foreground md:relative md:w-[490px] md:rounded-xl animate-slide-up"
    >
      <div class="flex items-center justify-between px-6 pt-6 pb-6">
        <div class="flex items-center">
          <div class="mr-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18px"
              height="18px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather feather feather-share text-theme-color"
            >
              <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
              <polyline points="16 6 12 2 8 6"></polyline>
              <line x1="12" y1="2" x2="12" y2="15"></line>
            </svg>
          </div>
          <b class="text-base font-bold">
            {{ i18nStore.translate('update_share') }}
          </b>
        </div>
        <div
          class="-m-3 cursor-pointer p-3 transition-all duration-200 hover:scale-125"
          @click="flagStore.setShareBoardOpen(false)"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14px"
            height="14px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="hover-text-theme vue-feather feather feather-x"
          >
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </div>
      </div>

      <div
        class="absolute top-16 bottom-24 left-0 right-0 h-auto overflow-auto px-6 md:relative md:top-0 md:bottom-0 !overflow-initial"
      >
        <!-- 文件信息 -->
        <div
          spellcheck="false"
          class="flex select-none items-center rounded-xl mb-5"
        >
          <div class="relative w-16 shrink-0">
            <div
              v-if="fileStore.curFileInfo.type === 'folder'"
              class="svg-color-theme"
            >
              <SvgIcon
                name="folder"
                :style="{ width: '53px', height: '52px' }"
                iconClass="svg-color-theme"
              />
            </div>
            <div
              v-else-if="fileStore.curFileInfo.type === 'image'"
              class="relative w-16 shrink-0"
            >
              <img
                :src="fileStore.curFileInfo.url"
                alt=""
                loading="lazy"
                class="ml-0.5 h-12 w-12 rounded object-cover"
              />
            </div>
            <div
              v-else-if="fileStore.curFileInfo.fileType.type === 'video'"
              class="relative w-16 shrink-0"
            >
              <video
                :src="fileStore.curFileInfo.url"
                class="ml-0.5 h-12 w-12 object-cover rounded"
                loop
                muted
                @loadeddata="
                  (e) => {
                    e.target.volume = 0;
                    e.target.play();
                  }
                "
              />
            </div>
            <div v-else class="flex items-center justify-center pr-2">
              <span
                class="absolute z-[5] mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-[9px] font-semibold text-theme-color"
              >
                {{ fileStore.curFileInfo.type }}
              </span>
              <SvgIcon
                name="file"
                svgClass="vue-feather dark:text-gray-800 text-gray-100 "
                :style="{ width: '38px', height: '51px' }"
                iconClass="svg-color-theme"
              />
            </div>
          </div>
          <div class="pl-2">
            <span
              :title="fileStore.curFileInfo.name"
              contenteditable="false"
              class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold hover:underline"
              style="max-width: 240px"
            >
              {{ fileStore.curFileInfo.name }}
            </span>
            <div class="flex items-center">
              <small class="block text-xs text-gray-500 dark:text-gray-500">
                <i
                  v-if="fileStore.curFileInfo[FILE_LIST.FILE_SHARE]"
                  class="pi pi-link vue-feather text-theme-color text-xs"
                />
                <span>{{ size }}</span>
                {{ i18nStore.translate('date', fileStore.curFileInfo.times) }}
              </small>
            </div>
          </div>
        </div>
        <!-- 分享链接 -->
        <div class="mb-4 sm:mb-5">
          <label
            class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
          >
            {{ i18nStore.translate('get_your_link') }}
          </label>
          <div class="relative flex items-center">
            <input
              id="link-input-9573277"
              :value="qrcodeUrl"
              type="text"
              readonly="readonly"
              class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background py-2 pr-16 pl-3 text-sm font-bold dark:bg-2x-dark-foreground focus:outline-theme-color"
            />
            <div class="flex items-center">
              <div class="absolute right-2.5 p-1">
                <i
                  v-if="isCopySuccess"
                  class="pi pi-check hover:text-theme-color vue-feather cursor-pointer feather feather-copy text-sm"
                ></i>
                <svg
                  v-else
                  @click="copyShareLink"
                  xmlns="http://www.w3.org/2000/svg"
                  width="14px"
                  height="14px"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="hover:text-theme-color vue-feather cursor-pointer feather feather-copy"
                >
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path
                    d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                  ></path>
                </svg>
              </div>
              <!-- <div class="absolute right-2.5 p-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14px"
                  height="14px"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="hover:text-theme-color vue-feather cursor-pointer feather feather-more-horizontal"
                  @click="generateQrcode"
                >
                  <circle cx="12" cy="12" r="1"></circle>
                  <circle cx="19" cy="12" r="1"></circle>
                  <circle cx="5" cy="12" r="1"></circle>
                </svg>
              </div> -->
            </div>
            <textarea
              class="pointer-events-none absolute right-full opacity-0"
            ></textarea>
            <textarea
              class="pointer-events-none absolute right-full opacity-0"
            ></textarea>
          </div>
        </div>
        <!-- 表单信息 -->
        <form @submit="submitUpdate">
          <!-- 密码 -->
          <div>
            <div
              class="flex w-full items-center justify-between space-x-2 sm:space-x-8 mb-6 sm:mb-7"
            >
              <div class="leading-5">
                <label
                  class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
                >
                  {{ i18nStore.translate('password_protection') }}
                </label>
                <span
                  class="block text-xs leading-4 dark:text-gray-500 text-gray-500"
                  >{{
                    i18nStore.translate(
                      'secure_your_project_with_a_custom_password_protection'
                    )
                  }}</span
                >
              </div>
              <InputSwitch v-model="passwordChecked" />
            </div>
            <div v-if="passwordChecked">
              <div class="-mt-2 mb-6 sm:mb-7 relative">
                <input
                  :type="isUpdatePasswordHidden ? 'password' : 'text'"
                  :placeholder="i18nStore.translate('enter_your_password')"
                  class="focus-border-theme input-dark focus:outline-theme-color"
                  maxlength="20"
                  v-model="password"
                />
                <div class="absolute right-4 p-1 top-3">
                  <i
                    @click="isUpdatePasswordHidden = !isUpdatePasswordHidden"
                    :class="`pi-${
                      isUpdatePasswordHidden ? 'eye-slash' : 'eye'
                    }`"
                    class="pi pi-eye-slash hover:text-theme-color vue-feather cursor-pointer feather feather-copy text-xl"
                  ></i>
                </div>
              </div>
            </div>
          </div>
          <!-- 邮箱 -->
          <div>
            <div
              class="flex w-full items-center justify-between space-x-2 sm:space-x-8 mb-6 sm:mb-7"
            >
              <div class="leading-5">
                <label
                  class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
                >
                  {{ i18nStore.translate('send_link_by_email') }}
                </label>
                <span
                  class="block text-xs leading-4 dark:text-gray-500 text-gray-500"
                  >{{ i18nStore.translate('email_link_sent') }}</span
                >
              </div>
              <InputSwitch v-model="emailChecked" />
            </div>
            <div v-if="emailChecked">
              <div class="-mt-2 mb-6 sm:mb-7 relative">
                <input
                  :type="isUpdatePasswordHidden ? 'password' : 'text'"
                  :placeholder="
                    i18nStore.translate('please_enter_email_address')
                  "
                  class="focus-border-theme input-dark focus:outline-theme-color"
                  maxlength="20"
                  v-model="email"
                />
                <div class="absolute right-4 p-1 top-3">
                  <i
                    @click="isUpdatePasswordHidden = !isUpdatePasswordHidden"
                    :class="`pi-${
                      isUpdatePasswordHidden ? 'eye-slash' : 'eye'
                    }`"
                    class="pi pi-eye-slash hover:text-theme-color vue-feather cursor-pointer feather feather-copy text-xl"
                  ></i>
                </div>
              </div>
            </div>
          </div>
          <!-- 过期时间 -->
          <div>
            <div
              class="flex w-full items-center justify-between space-x-2 sm:space-x-8 mb-6 sm:mb-7"
            >
              <div class="leading-5">
                <label
                  class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
                >
                  {{ i18nStore.translate('expiration') }}
                </label>
                <span
                  class="block text-xs leading-4 dark:text-gray-500 text-gray-500"
                  >{{
                    i18nStore.translate(
                      'your_link_will_expire_after_a_specific_time_period'
                    )
                  }}</span
                >
              </div>
              <InputSwitch v-model="expireChecked" />
            </div>
            <div class="-mt-2 mb-2 sm:mb-3" v-if="expireChecked">
              <div class="select-box box">
                <div
                  @click="activeOption(index)"
                  v-for="(option, index) in expirationOptions"
                  class="box-item active-bg-theme-100 active-border-theme transition-all duration-200 hover:scale-110 dark:text-[#00e1ff]"
                  :class="{ active: index === activeOptionIndex }"
                  :key="index"
                >
                  <span
                    class="box-value active-text-theme"
                    :class="{ active: index === activeOptionIndex }"
                    >{{ option.label }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="bg-[#D7F2FE] w-[100px] h-[100px] dark:bg-[#171819]">
          <div class="flex items-center justify-center" v-if="qrcodeUrl">
            <!-- <img :src="qrcodeUrl" class="w-[80px] h-[80px]" /> -->
            <Qrcode :value="qrcodeUrl" />
          </div>
        </div>
      </div>
      <!-- 取消分享和存储更改按钮 -->
      <div
        class="absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6 md:relative"
      >
        <button
          v-if="isConfirmDelete"
          @click="submitDelete"
          type="button"
          class="button-base w-full secondary hover:opacity-70 hover:scale-110 danger-solid"
        >
          <i v-if="isDeleteShareLoading" class="pi pi-spin pi-spinner"></i>
          <div v-else class="content">{{ i18nStore.translate('confirm') }}</div>
        </button>
        <button
          v-else
          @click="isConfirmDelete = true"
          type="button"
          class="button-base w-full secondary hover:opacity-70 hover:scale-110 dark:text-[#00e1ff]"
        >
          <div class="content">{{ i18nStore.translate('cancel_share') }}</div>
        </button>
        <button
          type="button"
          class="button-base w-full theme hover:opacity-70 hover:scale-110"
          @click="submitUpdate"
        >
          <i v-if="isUpdateShareLoading" class="pi pi-spin pi-spinner"></i>
          <div v-else class="content">
            {{ i18nStore.translate('save_changes') }}
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useFileStore, useI18nStore, useFlagStore } from '@/stores';
import { FILE_LIST } from '@/components/fileList/filedsConfig.js';
import { shareFile, emailShareFile, getFolderSize } from '@/apis/file';
const qrcodeUrl = ref('');

const fileStore = useFileStore();
const i18nStore = useI18nStore();
const flagStore = useFlagStore();

const isCreateShareLoading = ref(false);
const isUpdateShareLoading = ref(false);
const isDeleteShareLoading = ref(false);
const isConfirmDelete = ref(false);

const isShareSuccess = ref(false);

const isUpdatePasswordHidden = ref(true);

const shareBoardContainer = ref(null);
const password = ref('');
const email = ref('');
const passwordChecked = ref(password.value === '' ? false : true);
const emailChecked = ref(email.value === '' ? false : true);
const expireChecked = ref(false);

const data = ref({});

const expirationOptions = [
  { value: 1 * 3600000, label: '1h' },
  { value: 2 * 3600000, label: '2h' },
  { value: 6 * 3600000, label: '6h' },
  { value: 12 * 3600000, label: '12h' },
  { value: 24 * 3600000, label: '1d' },
  { value: 48 * 3600000, label: '2d' },
  { value: 168 * 3600000, label: '7d' }
];
const activeOptionIndex = ref(4);
const activeOption = (index) => {
  activeOptionIndex.value = index;
};
const size = ref(0);
onMounted(async () => {
  const res = await shareFile({
    fileId: fileStore.curFileInfo.id,
    isSmall: fileStore.curFileInfo.isSmall
  });
  data.value = res.data;
  if (res.code === 0) {
    qrcodeUrl.value = createShareLink(
      fileStore.curFileInfo.shareId,
      fileStore.curFileInfo.isSmall
    );
    if (res.data.code) {
      passwordChecked.value = true;
      password.value = res.data.code;
    }
    if (res.data.email) {
      emailChecked.value = true;
      email.value = res.data.email;
    }
  }
  if (fileStore.curFileInfo.isFolder) {
    getFolderSize({ id: fileStore.curFileInfo.id }).then((res) => {
      size.value = formatSize(res.data);
    });
  } else {
    size.value = fileStore.curFileInfo.size;
  }
});

const closeShareBoard = (e) => {
  if (e.target === shareBoardContainer.value) {
    flagStore.setShareBoardOpen(false);
  }
};

function getFiveYearsLaterTimestamp() {
  const currentDate = new Date(); // 获取当前日期
  currentDate.setFullYear(currentDate.getFullYear() + 5); // 当前年份加5年
  return currentDate.getTime(); // 返回毫秒级时间戳
}
const submitAdd = async () => {
  // if (!validate()) return;
  const data = {
    fileId: fileStore.curFileInfo.id,
    isSmall: fileStore.curFileInfo.isSmall,
    // 到期时间控制，默认5年
    expireTime: expireChecked.value
      ? expirationOptions[activeOptionIndex.value].value + Date.now()
      : getFiveYearsLaterTimestamp(),
    code: passwordChecked.value ? password.value : ''
  };
  isCreateShareLoading.value = true;
  const res = await fileStore.shareFile(data);
  qrcodeUrl.value = createShareLink(res.data, fileStore.curFileInfo.isSmall);
  emailChecked.value &&
    (await emailShareFile({
      email: email.value,
      link: qrcodeUrl.value
    }));
  isCreateShareLoading.value = false;
  isShareSuccess.value = true;
};
const submitUpdate = async () => {
  const datas = {
    id: data.value.id,
    fileId: data.value.fileId,
    isSmall: fileStore.curFileInfo.isSmall,
    expireTime: expireChecked.value
      ? expirationOptions[activeOptionIndex.value].value + Date.now()
      : getFiveYearsLaterTimestamp(),
    code: passwordChecked.value ? password.value : ''
  };
  isUpdateShareLoading.value = true;
  await fileStore.updateShareFile(datas);
  emailChecked.value &&
    (await emailShareFile({
      email: email.value,
      link: qrcodeUrl.value
    }));
  isUpdateShareLoading.value = false;
  flagStore.setShareBoardOpen(false);
};
const submitDelete = async () => {
  isDeleteShareLoading.value = true;
  await fileStore.deleteShareFile(data.value.id);
  isDeleteShareLoading.value = false;
  flagStore.setShareBoardOpen(false);
};
const isCopySuccess = ref(false);

const copyShareLink = async () => {
  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(qrcodeUrl.value);
      isCopySuccess.value = true;
      setTimeout(() => {
        isCopySuccess.value = false;
      }, 1000);
    }
  } catch (error) {
    console.error(error);
  }
};

const createShareLink = (shareId, Small) => {
  const id = btoa(`${shareId}`);
  const isSmall = btoa(`${Small}`);
  return `https://okpan.fun/share/${id}/post/${isSmall}`;
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
